<div class="container" >
	<fieldset>

		<!-- Form Name -->
		<legend>
			Nieuwe Klant
		</legend>

		<!-- Select Basic -->
		<div class="pull-left">
			<div class="control-group">
				<label class="control-label" for="customerNumber">Nummer</label>
				<div class="controls">
					<input type="number" id="customerNumber" name="customerNumber" min="0" max="99999" class="input-xlarge" value="0" ng-model="number">
				</div>
			</div>

			<!-- Text input-->
			<div class="control-group">
				<label class="control-label" for="name">Naam</label>
				<div class="controls">
					<input id="name" name="name" type="text" placeholder="naam" class="input-xlarge" required="" ng-model="name">

				</div>
			</div>
            <div class="control-group">
                <label class="control-label" for="extraName">Naam winkel</label>
                <div class="controls">
                    <input id="extraName" name="extraName" type="text" placeholder="naam winkel" class="input-xlarge" required="" ng-model="extraName">

                </div>
            </div>

			<!-- Select Basic -->
			<div class="control-group">
				<label class="control-label" for="language">Taal</label>
				<div class="controls">
                    <select id="language" name="language" class="input-xlarge" ng-model="selectedLanguage" ng-options="value.id as value.name for (key, value) in languages" data-style="btn-primary" bs-select></select>
				</div>
			</div>

            <div class="control-group">
                <label class="control-label" for="priceClass">Prijsklasse</label>
                <div class="controls">
                    <select id="priceClass" name="priceClass" class="input-xlarge" ng-model="selectedPriceClass" ng-options="value.id as value.name for (key, value) in priceclasses" data-style="btn-primary" bs-select></select>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="vatNumber">BTW-nummer</label>
                <div class="controls">
                    <input type="text" id="vatNumber" name="vatNumber"  class="input-xlarge"  ng-model="vatNumber" placeholder="BTW-nummer" >
                </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
                <label class="control-label" for="discount">Algemene korting</label>
                <div class="controls">
                    <input id="discount" name="discount" type="number" class="input-xlarge" required="" ng-model="discount" min="0" max="100" value="0">

                </div>
            </div>
		</div>
		<div class="pull-right">
			<div class="gridStyle" ng-grid="gridOptions"></div>
			<div class='ngGridCustomFooter'>
                <select id="telecomType" name="telecomType" class="input-xlarge" ng-model="newType" ng-options="value as value.name for (key, value) in telecomTypes" data-style="btn-primary" bs-select></select>
				<input id="value" name="value" type="text" placeholder="value" class="input-xlarge" required="" ng-model="newValue">
				<button class="btn btn-link" ng-click="addTelecom()">
					Toevoegen
				</button>
			</div>
		</div>
	</fieldset>
	<br />
	<br />
	<div class="tabbable">
		<ul class="nav nav-tabs">
			<li ng-repeat="address in addresses" ng-class="{active: $index == selectedAddress}" ng-click="changeAddressTab($index)">
				<a href>{{address.type.name}}</a>
			</li>
			<li ng-click="addAddress()">
				<a href><i class="icon-plus"></i></a>
			</li>
		</ul>
	</div>
	<div class="tab-content">
		<div ng-repeat="address in addresses" ng-class="{active: $index == selectedAddress}" class="tab-pane" >
			<div ng-include src="'templates/supplier/address.html'" ></div>
		</div>
	</div>
    <div class="pull-right button-bar">
             <button class="btn btn-primary" ng-click="saveCustomer()" >Opslaan</button>
    </div>

</div>
